<!DOCTYPE html>
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>ToDoList—最简单的待办事项列表</title>
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				font-size: 16px;
				background: #CDCDCD;
			}
			
			header {
				height: 50px;
				background: #333;
				background: rgba(47, 47, 47, 0.98);
			}
			
			section {
				margin: 0 auto;
			}
			
			label {
				float: left;
				width: 100px;
				line-height: 50px;
				color: #DDD;
				font-size: 24px;
				cursor: pointer;
				font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			}
			
			header input {
				float: right;
				width: 60%;
				height: 24px;
				margin-top: 12px;
				text-indent: 10px;
				border-radius: 5px;
				box-shadow: 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 6px rgba(0, 0, 0, 0.45) inset;
				border: none
			}
			
			input:focus {
				outline-width: 0
			}
			
			h2 {
				position: relative;
			}
			
			span {
				position: absolute;
				top: 2px;
				right: 5px;
				display: inline-block;
				padding: 0 5px;
				height: 20px;
				border-radius: 20px;
				background: #E6E6FA;
				line-height: 22px;
				text-align: center;
				color: #666;
				font-size: 14px;
			}
			
			ol,
			ul {
				padding: 0;
				list-style: none;
			}
			
			li input {
				position: absolute;
				top: 2px;
				left: 10px;
				width: 22px;
				height: 22px;
				cursor: pointer;
			}
			
			p {
				margin: 0;
			}
			
			li p input {
				top: 3px;
				left: 40px;
				width: 70%;
				height: 20px;
				line-height: 14px;
				text-indent: 5px;
				font-size: 14px;
			}
			
			li {
				height: 32px;
				line-height: 32px;
				background: #fff;
				position: relative;
				margin-bottom: 10px;
				padding: 0 45px;
				border-radius: 3px;
				border-left: 5px solid #629A9C;
				box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
			}
			
			ol li {
				cursor: move;
			}
			
			ul li {
				border-left: 5px solid #999;
				opacity: 0.5;
			}
			
			li a {
				position: absolute;
				top: 2px;
				right: 5px;
				display: inline-block;
				width: 14px;
				height: 12px;
				border-radius: 14px;
				border: 6px double #FFF;
				background: #CCC;
				line-height: 14px;
				text-align: center;
				color: #FFF;
				font-weight: bold;
				font-size: 14px;
				cursor: pointer;
			}
			
			footer {
				color: #666;
				font-size: 16px;
				text-align: center;
			}
			
			footer a {
				color: #666;
				text-decoration: none;
				color: #999;
			}
			
			@media screen and (max-device-width: 620px) {
				section {
					width: 96%;
					padding: 0 2%;
				}
			}
			
			@media screen and (min-width: 620px) {
				section {
					width: 600px;
					padding: 0 10px;
				}
			}
		</style>
	</head>

	<body>
		<header>
			<section>
				<form action="javascript:postaction()" id="form">
					<label for="title">ToDoList</label>
					<input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off">
				</form>
			</section>
		</header>
		<section>
			<h2>正在进行 <span id="todocount">1</span></h2>
			<ol id="todolist" class="demo-box">
				<li>
					<!--<input type="checkbox" onchange="update(0,&quot;done&quot;,true)">-->
					<!--<p id="p-0" onclick="edit(0)">ss</p>
					<a href="javascript:remove(0)">-</a>-->
				</li>
			</ol>
			<h2>已经完成 <span id="donecount">0</span></h2>
			<ul id="donelist"></ul>
		</section>
		<footer>
			Copyright © 2014 todolist.cn
			<a href="javascript:clear();">clear</a>
		</footer>
		<script type="text/javascript">
			function $(id) {

				return document.getElementById(id);
			}

			function clear() {//清除
				window.location.reload() //刷新
				localStorage.clear();

			}

			function edit(i) { //编辑
				load();
				var p = $("p-" + i);
				title = p.innerHTML;
				p.innerHTML = "<input id='input-" + i + "' value='" + title + "' />";
				var input = $("input-" + i);
				input.setSelectionRange(0, input.value.length);//选中输入框内的所有内容
				input.focus();
				input.onblur = function() {
					if(input.value.length == 0) {
						p.innerHTML = title;
						alert("内容不能为空");
					} else {
						update(i, "title", input.value);
					}
				};
			}

			function postaction() { //form表单提交
				var title = $("title");
				if(title.value == "") {
					alert("内容不能为空");
				} else {
					var data = loadData();
					var todo = {
						"title": title.value,
						"done": false
					};
					data.push(todo);
					saveData(data);
					var form = $("form");
					form.reset();
					load();
				}
			}

			//返回数组对象
			function loadData() {
				var collection = localStorage.getItem("todo");
				if(collection != null) {
					return JSON.parse(collection);
				} else return [];
			}

			function saveData(data) {//保存数组对象
				localStorage.setItem("todo", JSON.stringify(data));
			}

			function update(i, field, value) {//更新
				var data = loadData();
				console.log(data);
				var todo = data.splice(i, 1)[0]; //删除从i开始的一个元素，并把元素赋值给todo
				console.log(todo);
				todo[field] = value;
				data.splice(i, 0, todo); //覆盖i元素
				saveData(data);
				load();

			}

			function remove(i) {//删除
				var data = loadData();
				data.splice(i, 1)[0]; //删除从i开始的一个元素
				saveData(data);
				load();
			}

			//windows加载
			function load() {

				var todolist = $("todolist");
				var donelist = $("donelist");
				var collection = localStorage.getItem("todo");

				if(collection != null) {
					var data = JSON.parse(collection); //将json字符串转换为对象
					var todoCount = 0;
					var doneCount = 0;
					var todoString = "";
					var doneString = "";
					for(var i = data.length - 1; i >= 0; i--) {
						if(data[i].done) {
							doneString += "<li><input type='checkbox' onchange='update(" + i + ",\"done\",false)' checked='checked' />" +
								"<p id='p-" + i + "' onclick='edit(" + i + ")'>" + data[i].title + "</p>" +
								"<a href='javascript:remove(" + i + ")'>-</a></li>";
							doneCount++;
						} else {
							todoString += "<li><input type='checkbox' onchange='update(" + i + ",\"done\",true)' />" +
								"<p id='p-" + i + "' onclick='edit(" + i + ")'>" + data[i].title + "</p>" +
								"<a href='javascript:remove(" + i + ")'>-</a></li>";
							todoCount++;
						}
					};
					todocount.innerHTML = todoCount;
					todolist.innerHTML = todoString;
					donecount.innerHTML = doneCount;
					donelist.innerHTML = doneString;
				} else {
					todocount.innerHTML = 0;
					todolist.innerHTML = "";
					donecount.innerHTML = 0;
					donelist.innerHTML = "";
				}
			}

			window.onload = load;
			window.addEventListener("storage", load, false);
		</script>

	</body>

</html>